
<template>
  <view class="BtabsModal" :style="[
    {
      height: Height,
      lineHeight: Height,
      background: bgColor,
      position: `${!is_top ? 'relative' : 'fixed'}`
    }
  ]">
    <view class="BtabsModal_tab" :class="[u_indexs === indexs && 'BtabsModal_tab_active']" v-for="item, indexs in TabList"
      :key="indexs" @click="ishowModal(item, indexs)" :style="[{ width: width }]">
      {{ item.name }}
      <view class="BtabsModal_tab_icon" v-if="currIndexweight === indexs">
        <u-icon name="arrow-down-fill" size="11" v-if="!show"></u-icon>
        <u-icon name="arrow-up-fill" size="11" v-else></u-icon>
      </view>
    </view>
    <view class="BtabsModal_item" v-show="show && is_openModal" @click="close">
      <view class="BtabsModal_item_list" v-for="item, indexs in MList" :key="indexs"
        :class="[b_indexs == indexs ? 'BtabsModal_item_active' : '']" @click.stop="BModalFN(item, indexs)">
        <text>{{ item.name }} </text>
        <view class="BtabsModal_tab_icon">
          <u-icon v-if="b_indexs == indexs" name="checkmark" color="#FF4201"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { nextTick, ref, toRefs, watch } from 'vue';
export interface Props {
  Height?: string | number,
  bgColor?: string,
  width?: string,
  List?: any,
  MList?: any,
  is_tab_value?: any,
  currIndexweight?: number,
  is_hidden?: boolean,
  is_openModal?: boolean,
  is_top?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  Height: 80 + 'rpx',
  bgColor: '#fff',
  width: '33%',
  List: [{
    name: '全部产品',
  },
  {
    name: '新品',
  },
  {
    name: '分类',
  }],
  MList: [
    {
      name: '线路'
    },
    {
      name: '酒店'
    },
    {
      name: '门票'
    },
    {
      name: '抢购'
    },
  ],
  is_tab_value: [[0, 0], [1, 2], [3.4]],
  currIndexweight: 2,
  is_hidden: false,
  is_openModal: false,
  is_top: false
})
const b_indexs = ref<number>(0)
const u_indexs = ref<number>(0)
const show = ref<boolean>(false)
const { List, is_hidden, is_tab_value, MList } = toRefs(props)
const TabList = ref<any>(List.value)
watch(List, (Node) => {
  Node.forEach((item, indexs) => {
    if (indexs == 0) {
      item.is_show = is_hidden.value;
      item.is_icon = !is_hidden.value
      item.up = true
      item.down = false
    } else {
      item.is_icon = true
      item.up = true
      item.down = false
    }
  });
  nextTick(() => {
    TabList.value = Node
  })
})
const emit = defineEmits({})
function ishowModal(Node, indexs) {

  let opt = TabList.value
  let opt_value = is_tab_value.value
  if ([0, 1].includes(indexs)) {
    u_indexs.value = indexs
    show.value = false
  } else {
    u_indexs.value = -1
    show.value = !show.value
  }

  emit('isTab', Node)
  // opt[indexs].value = opt_value[indexs].includes(opt[indexs].value) ? opt_value[indexs].filter(item => item != opt[indexs].value)[0] : opt[indexs].value
  // opt[indexs].up = !opt[indexs].up
  // opt[indexs].down = !opt[indexs].down
  // emit('isTab', Node, opt[indexs].value)
  // TabList.value = Object.assign([], opt)
}
function close() {
  show.value = false
}
function BModalFN(Node, indexs) {
  console.log(Node, indexs, '22')
  b_indexs.value = indexs
  TabList.value[2].name = Node.name

}
</script>
<style lang="scss" scoped>
@import './BtabsModal.scss'
</style>